<template>
<form id="form1" runat="server">
	<!-- <input type='file' id="imgInp" /> -->
	<input ref="imgInp" type="file" accept="image/*" capture="camera"  id="imgInp" @change="change">
	<div>
		<img ref="blah" id="blah" src="" width="" height="" alt="显示您上传的商品图片" />	
	</div>
</form>
</template>


<script>
// 忽略eslint
// eslint-disable-next-line
/* eslint-disable */
export default {
	name: 'InputCamera',
	data() {
		return {

		}
	},
	methods: {
		readURL(input) {
		   let vm = this
		   if (input.files && input.files[0]) {
		       var reader = new FileReader();
		       reader.onload = function (e) {
		       	   console.log('e',e)
		       	   // document.getElementById('blah').setAttribute('src',e.target.result)
		           // $('#blah').attr('src', e.target.result);
		           console.log(vm)
		           vm.$refs.blah.setAttribute("src", e.target.result)
		       }
		       reader.readAsDataURL(input.files[0]);
		   }
		},
		change(){
		   this.readURL(this.getElment());
		},
		getElment(){
			return this.$refs.imgInp
		}
	}
}
</script>

<style scoped lang="scss">
img#blah{
	background-size: cover;
	width: 100%;
	height: auto; 
}
</style>